<template>
    <div class="select-people">
        <el-dialog :title="selectTitle" :visible.sync="visible" class="show-box" width="40%" >
            <div class="box-select clearfix">
                <div class="clearfix">
                    <div class="left fl">
                        <el-tabs @tab-click="tabClick">
                            <el-tab-pane :label="tab.name" @click="tab(tab)" v-for="(tab,index) in tabList" :key="index">
                                <ul class="last-people" v-if="tab.type=='LASTPERSON'">
                                    <li v-for="(data,i) in lastPeople" :key="i">
                                        <span class="user-box" @click="pickClick(data)">
                                            <img class="user-img" v-if="!data.pic" src="../../assets/image/avtar.jpg" alt="">
                                            <img class="user-img" v-else :src="data.pic" alt="">
                                            <span class="user-name">{{ data.cname }}</span>
                                        </span>
                                    </li>
                                </ul>
                                <ul class="last-people" v-if="tab.type=='DATASOURSE'">
                                    <li v-for="(data,i) in ptList" :key="i">
                                        <span class="user-box" @click="pickClick(data)">
                                            <img class="user-img" v-if="!data.pic" src="../../assets/image/avtar.jpg" alt="">
                                            <img class="user-img" v-else :src="data.pic" alt="">
                                            <span class="user-name">{{ data.cname }}</span>
                                        </span>
                                    </li>
                                </ul>
                                <div v-if="tab.type=='TREEFUNCTION'">
                                    <!-- <el-input
                                    placeholder="输入关键字进行过滤"
                                    v-model="filterText">
                                    </el-input> -->
                                    <el-tree
                                        class="filter-tree"
                                        :props="defaultAllProps"
                                        :data="departData"
                                        :filter-node-method="filterNode"
                                        ref="tree">
                                        <span class="custom-tree-node" slot-scope="{ node, data }">
                                            <span class="user-box" @click="pickClick(data)" v-if="data[tree.type]==tree.typeNum">
                                                <img class="user-img" v-if="!data[tree.pic]" src="../../assets/image/avtar.jpg" alt="">
                                                <img class="user-img" v-else :src="data[tree.pic]" alt="">
                                                <span class="user-name">{{ data[tree.cname] }}</span>
                                            </span>
                                            <span v-else>{{ data[tree.cname] }}</span>
                                        </span>
                                    </el-tree>
                                </div>

                                <el-tree
                                    v-if="tab.type=='TREEFUNCTION_LAZY' && isShow==true"
                                    class="filter-tree"
                                    :props="defaultProps"
                                    :load="loadNode"
                                    accordion
                                    lazy
                                >
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <span class="user-box" @click="pickClick(data)" v-if="data[tree.type]==tree.typeNum">
                                            <img class="user-img" v-if="!data[tree.pic]" src="../../assets/image/avtar.jpg" alt="">
                                            <img class="user-img" v-else :src="data[tree.pic]" alt="">
                                            <span class="user-name">{{ data[tree.cname] }}</span>
                                        </span>
                                        <span v-else>{{ data[tree.cname] }}</span>
                                    </span>
                                </el-tree>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="right fl">
                        <h3 class="title">已选择成员</h3>
                        <div class="right-select">
                            <ul>
                                <li v-for="(item,index) in selectPeople" :key="index">
                                    <img class="user-img" v-if="!item.pic" src="../../assets/image/avtar.jpg" alt="">
                                    <img v-else :src="item.pic" alt="">
                                    <span>{{ item.cname }}</span>
                                    <i class="fa fa-times close" @click="delPeopleClick(index)"/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="btn-box">
                    <el-button @click="visible=false">关闭</el-button>
                    <el-button type="primary" @click="subClick">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getSelectTabs, getDataBySourseId, getTreeSolutionByIdForAll, getTreeSolutionByIdForItem, queryTreeSolution, getLastUsers, saveLastUsers, thequeryTreeSolution } from '@/api/api'
export default {
    data() {
        return {
            visible: false,
            isShow: false,
            alldepart: [],
            departData: [],
            name: '', // 搜索输入员工名称
            selectTitle: '选择人员',
            tabList: [],
            filterText: '',
            tree: {

            },
            // 波特周写的
            defaultProps: {
                label: 'EMPVJGDR_CNAME',
                isLeaf: 'leaf'
            },
            defaultAllProps: {
                children: 'childrens',
                label: 'EMPVJGDR_CNAME'
            },
            parmstab: {
                'paramType': 'COLUMN_ID',
                'paramValue': '88825'
            },
            search: {
                formId: 3185, params: '%7B%7D', id: 'c0', lv: 0,
                filter: {
                    EMPVORGANIZATION_CNAME: ''
                }
            },
            // 选择的人员容器
            selectPeople: [],
            // 最近联系人
            lastPeople: [],
            // 普通列表数据
            ptList: []
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    },
    created() {
        this._getSelectTabs()
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        tabClick(tabs) {
            const type = this.tabList[tabs.index].type
            const cname = this.tabList[tabs.index].cname
            const id = this.tabList[tabs.index].id
            const pic = this.tabList[tabs.index].pic
            this.tree.id = id
            this.tree.cname = cname
            this.tree.pic = pic
            if (type == 'LASTPERSON') {
                this._getLastUser(id, cname, pic)
            } else if (type == 'DATASOURSE') {
                const solutionKey = this.tabList[tabs.index].solutionId
                this._getDataBySourseId({ solutionKey: solutionKey }, id, cname, pic)
            } else if (type == 'TREEFUNCTION') {
                const solutionId = this.tabList[tabs.index].solutionId
                this._getTreeSolutionByIdForAll({ swaggerUserCode: 'sysadmin', solutionId: solutionId })
            } else if (type == 'TREEFUNCTION_LAZY') {
                this.tree.solutionId = this.tabList[tabs.index].solutionId
                this.tree.type = (this.tabList[tabs.index].lastval).split('=')[0]
                this.tree.typeNum = (this.tabList[tabs.index].lastval).split('=')[1]
                this._queryTreeSolution(this.tree.solutionId, id)
            }
        },
        // 选人
        pickClick(user) {
            const _this = this
            const flag = this.selectPeople.some(item => {
                if (user.id == item.id) {
                    return true
                } else {
                    return false
                }
            })
            if (flag) {
                _this.$message({
                    message: '该员工已被选择',
                    type: 'warning'
                })
            } else {
                this.selectPeople.push({
                    id: user[this.tree.id],
                    cname: user[this.tree.cname],
                    pic: user[this.tree.pic]
                })
            }
        },
        // 删除所选人
        delPeopleClick(index) {
            this.selectPeople.splice(index, 1)
        },
        // 加载部门人员
        loadNode(node, resolve) {
            if (node.level === 0) {
                return resolve(this.alldepart)
            }
            const id = node.data[this.tree.id]
            queryTreeSolution(this.tree.solutionId, this.tree.id, id, node.level).then(
                res => {
                    const resp = res
                    resp.map(function(item) {
                        if (item.EMPVORGANIZATION_XTYPE == 4) {
                            item.leaf = true
                            item.children = []
                        }
                    })
                    resolve(resp)
                }
            ).catch(err => { console.log(err) })
        },
        // 打开弹窗
        openToSelect() {
            this.visible = true
        },
        _getTreeSolutionByIdForAll(params) {
            getTreeSolutionByIdForAll(params).then(res => {
                console.log(res)
                const depart = res
                this.departData = depart
                this.isShow = true
            }).catch(err => {
                console.log(err, 'err')
            })
        },
        _queryTreeSolution(solutionId, id) {
            queryTreeSolution(solutionId, id).then(res => {
                const depart = res
                this.alldepart = depart
                this.isShow = true
            }).catch(err => {
                console.log(err, 'err')
            })
        },
        _getSelectTabs() {
            getSelectTabs(this.parmstab).then(res => {
                if (res.rcode == '0000') {
                    this.tabList = res.data
                    res.data.map(item => {
                        if (item.type == 'LASTPERSON') {
                            const id = item.id
                            const cname = item.cname
                            const pic = item.pic
                            const lastPeople = item.datas
                            this.lastPeople = []
                            lastPeople.map(item => {
                                this.lastPeople.push({
                                    id: item[id],
                                    cname: item[cname],
                                    pic: item[pic]
                                })
                            })
                        }
                    })
                }
            }).catch(err => {
                console.log(err, 'err')
            })
        },
        _getDataBySourseId(params, id, cname, pic) {
            getDataBySourseId(params).then(res => {
                if (res.rcode == '0000') {
                    const data = res.data
                    this.ptList = []
                    data.map(item => {
                        this.ptList.push({
                            id: item[id],
                            cname: item[cname],
                            pic: item[pic]
                        })
                    })
                }
            }).catch(err => {
                console.log(err, 'err')
            })
        },
        // 获取最近联系人
        _getLastUser(id, cname, pic) {
            getLastUsers().then(res => {
                if (res.rcode == '0000') {
                    const data = res.data
                    this.lastPeople = []
                    data.map(item => {
                        this.lastPeople.push({
                            id: item[id],
                            cname: item[cname],
                            pic: item[pic]
                        })
                    })
                }
            })
        },
        // 确认选择人员
        subClick() {
            this.visible = false
            this.$emit('select', this.selectPeople)
            const list = []
            this.selectPeople.map(item => {
                list.push({ dataValue: item.id })
            })
            saveLastUsers(list).then(res => {
                // console.log(res)
            })
        },
        // 搜索
        searchClick() {
            thequeryTreeSolution(this.search).then(res => {
                const depart = res
                this.alldepart = depart
            }).catch(err => {
                console.log(err, 'err')
            })
        }
    }
}
</script>
<style lang="scss">
	.select-people{
		.el-tabs__content .el-tab-pane,.el-tabs .el-tab-pane{
			height: 465px;
		}
		.el-tabs__content .el-tab-pane > div{
			height: auto;
		}
		.box-select{
		    .btn-box{
		        text-align: right;
		        margin-top: 10px;
		    }
		    .last-people{
		        li{
		            border-radius: 2px;
		            border: 1px solid #e7e7e7;
		            padding: 10px;
		            margin-bottom: 10px;
		            cursor: pointer;
		        }
		    }
		    .left,.right{
		        border:1px solid #e7e7e7;
		        border-radius: 2px;
		        height: 500px;
		        overflow: hidden;
		        .custom-tree-node{
		            display: block;
		            width: 100%;
		        }
		        .user-box{
		            height: 26px;
		            line-height: 26px;
		            display: block;
		            width: 100%;
		        }
		        .user-img{
		            width: 20px;
		            height: 20px;
		            border-radius: 50%;
		            vertical-align: middle;
		        }
		        .user-name{
		            display: inline-block;
		            vertical-align: middle;
		        }
		        .title{
		            font-size: 14px;
		            color: #666;
		            border-bottom: 1px solid #e7e7e7;
		            padding: 10px;
		        }
		        .right-select{
		            padding: 15px;
		            ul{
		                li{
		                    position: relative;
		                    margin-top: 5px;
		                    padding: 5px;
		                    img{
		                        width: 50px;
		                        height: 50px;
		                        display: inline-block;
		                        vertical-align: middle;
		                        border-radius: 50%;
		                    }
		                    span{
		                        display: inline-block;
		                        vertical-align: middle;
		                    }
		                    line-height: 50px;
		                    border: 1px solid #e7e7e7;
		                    border-radius: 2px;
		                    .close{
		                        position: absolute;
		                        right: 10px;
		                        top: 50%;
		                        transform: translateY(-50%);
		                        cursor: pointer;
		                    }
		                }
		            }
		        }
		    }
		    .left{
		        width: 60%;
		        padding: 0 10px;
		    	overflow: hidden;
		    }
		    .right{
		        margin-left: 10px;
		        width: calc(40% - 10px);
				overflow: auto;
		    }
		}
	}

</style>

